<script setup lang="ts">
/**
 * 系统管理-系统设置-操作日志
 */
import {Refresh, Search} from '@element-plus/icons-vue'
import {onMounted, ref} from 'vue'
import {deleteOperLogApi, getOperLogPageApi} from '@/assets/api/systemManagement/system/log'
import {ElMessage} from 'element-plus'
import TableToolButton from '@/components/base/TableToolButton.vue'

const form = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  user: '',
  startTime: '',
  endTime: ''
})
const operLogDate = ref([])

const onSubmit = () => {
  form.value.pageNum = 1
  form.value.startTime = operLogDate.value[0]
  form.value.endTime = operLogDate.value[1]
  getTableData()
}

const onReset = () => {
  form.value.user = ''
  form.value.startTime = ''
  form.value.endTime = ''
  operLogDate.value = []
}

// 全选按钮
const multipleTableRef = ref()
const multipleSelection = ref<object[]>([])
const handleSelectionChange = (val: object[]) => {
  multipleSelection.value = val
}

// 查询日志列表
const tableData = ref([])
const tableLoading = ref(false)
const getTableData = () => {
  tableLoading.value = true
  getOperLogPageApi(form.value).then(res => {
    tableLoading.value = false
    if (res.data.code !== 200) {
      ElMessage.error({message: res.data.data, showClose: true})
      return
    }
    tableData.value = res.data.data.records
    form.value.total = res.data.data.total
  })
}

// 页码切换处理器
const handleCurrentChange = () => {
  getTableData()
}

// 删除日志
const deleteCallBack = (ids: string) => {
  deleteOperLogApi(ids).then(res => {
    if (res.data.code === 200) {
      ElMessage.success({message: res.data.data, showClose: true})
      getTableData()
    } else {
      ElMessage.error({message: res.data.data, showClose: true})
    }
  })
}

onMounted(() => {
  getTableData()
})
</script>

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-row style="padding: 0.4%">
      <el-col :span="24">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="操作名">
            <el-input v-model="form.user" style="width: 200px" placeholder="操作名" clearable></el-input>
          </el-form-item>
          <el-form-item label="操作时间">
            <el-date-picker
              v-model="operLogDate"
              type="daterange"
              range-separator="至"
              start-placeholder="起始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" :icon="Search">搜索</el-button>
              <el-button @click="onReset" :icon="Refresh">重置</el-button>
            </el-form-item>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 表格工具 -->
    <el-row style="padding: 0.4%">
      <el-col :span="24">
        <table-tool-button :add-visible="false" :edit-visible="false" :export-visible="false"
                           :selected-array="multipleSelection" @to-delete="deleteCallBack"/>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row style="padding: 0.4%">
      <el-col :span="24">
        <el-table
          ref="multipleTableRef"
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          border
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column property="operName" label="操作名"/>
          <el-table-column property="title" label="操作接口"/>
          <el-table-column property="operIp" label="操作ip"/>
          <el-table-column property="createTime" label="操作时间"/>
        </el-table>
        <el-pagination :page-size="form.pageSize" v-model:current-page="form.pageNum"
                       @current-change="handleCurrentChange" layout="prev, pager, next" v-model:total="form.total"/>

      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
}
</style>
